<template>
	<view class="content commonPop">
		<u-popup :show="isAdd" mode="bottom">
			<view class="purchaseBox">
				<view class="baseTop">
					<text>应急采购</text>
					<view class="closeBox" @click="isAdd = false">
						<image src="../static/closeBtn.png" mode=""></image>
					</view>
				</view>
				
				<view class="purchaseForm">
					<view class="purchaseli">
						<label>配件分类：</label>
						<input type="text" readonly v-model="formData.catalogName" placeholder="请输入" />
					</view>
					<view class="purchaseli">
						<label>配件名称：</label>
						<input type="text" readonly v-model="formData.partsName" placeholder="请输入" />
					</view>
					<view class="purchaseli">
						<label>配件规格：</label>
						<input type="text" readonly v-model="formData.specification" placeholder="请输入" />
					</view>
					<view class="purchaseli">
						<label>配件数量：</label>
						<input type="text" placeholder="请输入" v-model="numberTxt" />
					</view>
				</view>
				
				<view class="photoBox">
					<text>上传图片：</text>
					<view class="upladInfo">
						<u-upload
							style="width:144rpx;height:144rpx;border-radius:12rpx;"
						   :fileList="fileList"
						   @afterRead="afterRead"
						   @delete="deletePic"
						   name="1"
						   multiple
						   :maxCount="10"
						 ></u-upload>
					</view>
				</view>
				
				<view class="submitBtn" @click="submitForm">
					提交
				</view>
				
			</view>
		</u-popup>	
	</view>
</template>

<script>
	import { addPurchaseOrder } from '@/api/login.js';
	import baseUrl  from '@/util/config.js';
	export default {
		name:"purchase",
		data() {
			return {
				isAdd: false,
				formData:{
					
				},
				numberTxt: '',
				fileList: []
			};
		},
		methods:{
			showInfo(val){
				console.log(val);
				this.formData = val;
				this.isAdd = true;
			},
			submitForm(){
				let subForm = {
					imageUrl: '',
					number: this.numberTxt,
					partsId: this.formData.id,
					orderId: this.formData.orderId,
					projectId: this.formData.projectId
				}
				if(this.fileList.length > 0) {
					let urlArr = [];
					this.fileList.forEach(item=>{
						urlArr.push(item.url);
					});
					subForm.imageUrl = urlArr.toString();
				} else {
					subForm.imageUrl = '';
				}	
				console.log(subForm);
				addPurchaseOrder(subForm).then(res=>{
					if(res.code == 200) {
						uni.$u.toast('采购申请成功，请等待管理员审核!。');
					} else {
						uni.$u.toast(res.msg);
					}
				});
			},
			afterRead(event) {
				console.log(event);
				let wenList = event.file;
				wenList.forEach(item=>{
					uni.uploadFile({
						url: baseUrl.baseUrl + '/common/upload',
						filePath: item.url,
						name: 'file',
						header: {
							Authorization: 'Bearer ' + uni.getStorageSync('userToken')
						},
						formData: {
							frontFileType: 'picture'
						},
						success: res => {
							var jsurl = JSON.parse(res.data)
							if (jsurl.code != 200) {
								return uni.$u.toast(jsurl.msg);
							}
							let objj = {
								url: jsurl.url
							};
							this.fileList.push(objj);
						}
					});
				})
			},
			deletePic(val){
				console.log(val);
				this.fileList.splice(val.index,1);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.purchaseBox{
			background: #F5F5F5;border-radius: 32rpx 32rpx 0px 0px;padding:0 24rpx;
			.baseTop{
				@include baseFont(36rpx,#333,128rpx);font-weight: 500;text-align: center;
				.closeBox{
					position: absolute;right:38rpx;top:52rpx;
					image{
						display: block;width:24rpx;height:24rpx;
					}
				}
			}
			.photoBox{
				background-color:#fff;border-radius:8rpx;padding:32rpx;margin-top:16rpx;
				text{
					@include baseFont(30rpx,#262626,42rpx);margin-bottom:20rpx;display: block;
				}
			}
			.submitBtn{
				height: 80rpx;width:100%;@include baseFont(30rpx,#fff,80rpx);font-weight:500;
				background: linear-gradient( 90deg, #588FFF 0%, #3671E9 100%);text-align:center;
				border-radius: 68rpx;margin:32rpx 0 82rpx;
			}
			.purchaseForm{
				background-color:#fff;border-radius:12rpx;
				.purchaseli{
					@include flx;justify-content: space-between;padding:0 32rpx;border-bottom:2rpx solid #F0F0F0;
					label{
						display: block;@include baseFont(30rpx,#333,112rpx);
					}
					input{
						display: block;@include baseFont(30rpx,#333,112rpx);height:112rpx;text-align: right;
					}
				}
			}
		}
	}

</style>